<link rel="stylesheet" href="/src/css/cart.css"/>
<navbar></navbar>

<div style="margin-top:50px;margin:0 auto;width:70%;position:relative">
  <h4>{{vm.cart.label}}(共{{vm.cartCount()}}件 总计 {{vm.cartTotal()}} 元)</h4>
  <div class="alert alert-info" ng-if="vm.cartInfo.length == 0" style="text-align:center">购物车尚未有商品</div>
  <div class="alert alert-info" ng-if="vm.cartInfo.length >0" style="text-align:center">商家：{{vm.merchantName}}&nbsp;&nbsp;&nbsp;&nbsp;购物车列表</div>
  
  <table class="table table-bordered table-hover" ng-if="vm.cartInfo.length > 0"  >
    <thead>
    <tr>
      <th  align="center">商品名称</th>
      <td  align="center">图片</td>
      <th  align="center">单价</th>
      <th  align="center">购买数量</th>
      <td  align="center">小计</td>
      <th  align="center">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="line in vm.cartInfo" ng-class="{removed: line.count <= 0}">
      
      <td  align="center" style="vertical-align: middle;" >{{line.food.fname}}</td>
      <td  align="center"><img style="width:50px;height:50px" ng-src="{{line.food.fimg}}"></td>
      <td  align="center"  style="color:red;vertical-align: middle;">{{line.food.fprice}}￥</td>
      <td  align="center" style="vertical-align: middle;">
        <span class="btn btn-primary btn-sm" ng-click="vm.decrementQuantity(line)"><i
            class="glyphicon glyphicon-minus"></i></span>
        {{line.count}}
        <span class="btn btn-primary btn-sm" ng-click="vm.incrementQuantity(line)"><i
            class="glyphicon glyphicon-plus"></i></span>
      </td>
      <td  align="center" style="color:red;vertical-align: middle;">{{line.food.fprice*line.count}}￥</td>
      <td  align="center" style="vertical-align: middle;"><button class="btn btn-primary" ng-click="vm.removeFromCart(line)">移除</button></td>
    </tr>
    </tbody>
  </table>
  <h4 ng-if="vm.cartInfo.length > 0">(共{{vm.cartCount()}}件 总计 {{vm.cartTotal()}} 元)</h4>
  <a ng-if="vm.cartInfo.length > 0" style="position:absolute;right:0px" ng-click="vm.settlement(vm.cartInfo[0].food.merchantIcnum)"><image ng-src="/src/image/jiesuan.gif" /></a>
</div>
